<style>
   .form {
        width: 60%;
        margin-left: 20%;
        margin-top: 1%;   
    }
</style>
<template>
    <div>
        <div>
            <Form ref="formValidate" :rules="ruleValidate" :model="new_email" class = "form" label-position="right" :label-width="120" width="100%">
                <FormItem label="邮箱账号:" prop="email_name">
                    <Input v-model="new_email.email_name" size="large" :disabled="this.status" placeholder='邮箱账号（地址）'></Input>
                </FormItem>
                <FormItem label="客户端授权密码:" prop="email_authorize_code">
                    <Input v-model="new_email.email_authorize_code" size="large" :disabled="status" placeholder='邮箱客户端授权码'></Input>
                </FormItem>
                <FormItem label="邮箱密码:" prop="email_password">
                    <Input v-model="new_email.email_password" size="large" :disabled="this.status" placeholder='邮箱登录密码'></Input>
                </FormItem>
                <FormItem label="SMTP服务器:" prop="smtp">
                    <Input v-model="new_email.smtp" size="large" :disabled="this.status"  placeholder='该邮箱发送邮件使用的SMTP服务器'></Input>
                </FormItem>
                <FormItem label="端口:" prop="email_port">
                    <Input v-model="new_email.email_port" size="large" :disabled="this.status"  placeholder='发送邮件所用的端口号'></Input>
                </FormItem>
                <center>
                    <Button style="font-size:15px;width:10%;margin-bottom:20px;" size="small" type="primary" v-if="btn_add_status" @click="handleAddEmail()"> 添加</Button>
                    <Button style="font-size:15px;width:10%;margin-bottom:20px;" size="small" type="primary" @click="change_email()" v-if="btn_change"> 修改</Button>
                </center>
                <center>
                    <Button style="font-size:15px;width:10%;margin-bottom:20px;" size="small" type="primary" @click="AddEmail?create_email('formValidate'):EmailChange('formValidate')" v-if="btn_ok"> 确定</Button>
                    <Button style="font-size:15px;width:10%;margin-bottom:20px;" size="small" type="primary" @click="handleConcel()" v-if="btn_cancle"> 取消</Button>
                </center>
            </Form>     
        </div>
        <div>
            <i-table  :border="true" :columns="columns5" :data="email_info"></i-table>
        </div>
            
    </div>
</template>

<script>
import Vue from 'vue';
import parent from '../Parent';
export default {
    extends:parent,
    data () { 
        return {
                total:0,
                new_email: {
                    email_name:'',
                    email_authorize_code: '',
                    email_password: '',
                    smtp: '',
                    email_port: ''
                },
                emails:{},
                columns5: [
                {
                    type: 'index',
                    title:'序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '邮箱编码',
                    width: 100,
                    align: 'center',
                    key: 'email_id'
                },
                {
                    title: '邮箱账号',
                    align: 'center',
                    key: 'email_name'
                },
                {
                    title: '邮箱密码',
                    align: 'center',
                    key: 'email_password'
                },
                {
                    title: '授权密码',
                    align: 'center',
                    key: 'email_authorize_code'
                },
                {
                    title: 'SMTP',
                    align: 'center',
                    key: 'email_smtp'
                },
                {
                    title: '端口',
                    align: 'center',
                    key: 'email_port'
                },
                {
                    title:'操作',
                    width:300,
                    align:'center', 
                    render:(h,params)=>{
                    return h('div', [
                        h('Button', {
                            props: { type: 'primary', size: 'small' },
                            style: { marginRight: '5px',display:this.showButton("111532")},
                            on: { click: () => { this.select_email(params) } }
                        }, this.userOrNOt(params)),
                        h('Button', {
                            props: { type: 'info', size: 'small' },
                            style: { marginRight: '5px'},
                            on: { click: () => { this.check_email(params) } }
                        }, '查看'),
                        h('Button', {
                            props: { type: 'error', size: 'small' },
                            style: { marginRight: '5px',display:this.showButton("111512")},
                            on: { click: () => { this.delete_email(params) } }
                        }, '删除'),
                    ]
                    );
                }}
            ],
            status:true,
            btn_add_status:this.checkPermission('111511'),
            btn_ok:false,
            btn_cancle:false,
            btn_change:false,//false
            AddEmail:true,
            checkde_id:0,
            ruleValidate:{
                email_name: [
                    { required: true, message:"邮箱账号不能为空", trigger:"blur"},
                    { type:'email', message:"请输入正确格式的邮箱地址", trigger:"blur"}
                ],
                email_authorize_code: [
                    { required: true, message:"客户端授权密码不能为空", trigger:"blur"},
                ],
                email_password:[
                    { required: true, message:"邮箱密码不能为空", trigger:"blur"},
                ],
                smtp:[
                    { required: true, message:"SMTP不能为空", trigger:"blur"},
                ],
                email_port:[
                    { required: true, message:"端口号不能为空", trigger:"blur"},
                ],
            }
            }
    },
    computed:{
        email_info() {
            var email_info =[];
            for(var i = 0; i < this.total; i++)
            {
                email_info[i] = {};
                email_info[i].email_id = this.emails[i].id;
                email_info[i].email_name = this.emails[i].email_name;
                email_info[i].email_password = this.emails[i].email_password;
                email_info[i].email_smtp = this.emails[i].smtp;
                email_info[i].email_port = this.emails[i].email_port;
                email_info[i].email_authorize_code = this.emails[i].email_authorize_code;
            }
            return email_info;
        },
        select_id() {
            for(var i=0;i<this.total;i++)
            if(this.emails[i].selected == 1)
            {
                return this.emails[i].id;
            }
        },
    },
    methods: {
        handleAddEmail() {
            this.btn_add_status = false;
            this.status = false;
            this.btn_ok = true;
            this.btn_cancle = true;
            this.btn_change = false;
            this.new_email = {};
        },
        handleConcel() {
            this.btn_add_status = this.checkPermission('111511');
            this.btn_ok = false;
            this.btn_cancle = false;
            this.status = true;
            this.new_email = {};
        },
        create_email(formValidate) {
            this.$refs[formValidate].validate((valid) => {
                if(valid) {
                    this.api.post("email/create_new_email",{
                        email_name:this.new_email.email_name, 
                        email_password:this.new_email.email_password,
                        email_port:this.new_email.email_port,
                        email_smtp:this.new_email.smtp,
                        email_authorize_code:this.new_email.email_authorize_code},res => {
                            this.$CustomMessage.info(res.message);
                            this.new_email = {};
                            this.status = true;
                            this.btn_add_status = this.checkPermission('111511');
                            this.btn_ok = false,
                            this.btn_cancle = false,
                            this.api.post("email/get_list",res => {
                                this.emails = res.list; 
                                this.total = res.list.length;
                        });
                    });
                }else {
                    this.$CustomMessage.error("请按要求填写信息");
                }
            })
        },
        delete_email(params) {
            if(confirm("是否确定删除？（不可恢复）")) {
                this.api.post("email/delete_email", { the_delete_email_id:params.row.email_id}, res => {
                    this.$CustomMessage.info(res.message);
                    this.api.post("email/get_list",res => {
                        this.emails = res.list; 
                        this.total = res.list.length;
                    });
                });
            }
        },
        select_email(params) {
            this.api.post("email/selsct_email",{ id:params.row.email_id}, res => {
                this.$CustomMessage.info(res.message);
                this.api.post("email/get_list",res => {
                    this.emails = res.list; 
                    this.total = res.list.length;
                });
            });
        },
        check_email(params) {   
            var index = params.index;
            this.checkde_id = params.row.email_id,
            this.status = true;
            this.btn_add_status = this.checkPermission('111511');
            this.btn_ok = false;
            this.btn_cancle = false;
            this.new_email.email_name = this.emails[index].email_name;
            this.new_email.email_password = this.emails[index].email_password;
            this.new_email.email_authorize_code = this.emails[index].email_authorize_code;
            this.new_email.email_port = this.emails[index].email_port;
            this.new_email.smtp = this.emails[index].smtp;
            this.btn_change = this.checkPermission('111513');
        },
        change_email() {
            this.status = false;
            this.btn_add_status = false;
            this.btn_change = false;
            this.btn_ok = true;
            this.btn_cancle = true;
            this.AddEmail = false;
        },
        EmailChange(formValidate) {
            this.$refs[formValidate].validate((valid) => {
                if(valid) {
                    this.api.post("email/change_email",{
                        id:this.checkde_id,
                        email_name:this.new_email.email_name, 
                        email_password:this.new_email.email_password,
                        email_port:this.new_email.email_port,
                        email_smtp:this.new_email.smtp,
                        email_authorize_code:this.new_email.email_authorize_code}, res => {
                            this.$CustomMessage.info(res.message);
                            this.new_email = {};
                            this.status = true;
                            this.btn_add_status = this.checkPermission('111511');
                            this.btn_ok = false,
                            this.btn_cancle = false,
                            this.AddEmail = true;
                            this.api.post("email/get_list",res => {
                                this.emails = res.list; 
                                this.total = res.list.length;
                            });
                    });
                }else {
                    this.$CustomMessage.error("请按要求填写信息");
                }
            })
        },
        userOrNOt(params)
        {
            var id = params.row.email_id;
            if(id == this.select_id)
            {
                return "已启用";
            }else {
                return "启用";
            }
        } 
    },
    created() {
        this.api.post("email/get_list",res => {
            this.emails = res.list; 
            this.total = res.list.length;
            console.log(this.emails);
        });
    }  
}
</script>
